﻿@{
    ViewBag.Title = "Attempt";
    Layout = "~/Areas/Student/Views/Shared/_Layout.cshtml";
    }
  <div id="divMsgIndex"></div>
<div class="form-group">
    <div class="col-lg-3">
        <input id="TXTSearchString" type="text" placeholder="Search Box" class="form-control">
    </div>
    <a id="btnSearch" class="btn btn-sm btn-default">Search</a>
</div>

<div class="widget">
    <div class="widget-head">
        <div class="pull-left"><a id="btnDeleteAll" class="btn add-on" style="margin-left: 5px" ><i class="fa fa-trash-o"></i> Delete</a></div>
        <div class="clearfix"></div>
    </div>

    <div class="widget-content">
          <div id="NoRecord"></div>
        <table class="table table-striped table-bordered table-hover" id="AttemptTable">
            <thead>
                <tr data-bind="click: sortTable">
                    <th>
                            @*<input type="checkbox" id="CHKCheckAll" onclick="javascript: CheckAll(this)" name="chk[]" title="" />*@
                    </th>
                    <th data-column="TestName" class="sorting" role="columnheader" rowspan="1" colspan="1"  data-bind="attr: { class:currentColumn() == 'TestName'? iconType :'sorting' }">Test</th>
                    <th data-column="IsFinish" class="sorting" role="columnheader" rowspan="1" colspan="1"  data-bind="attr: { class:currentColumn() == 'IsFinish'? iconType :'sorting' }">IsFinish</th>
                    <th data-column="Score" class="sorting" role="columnheader" rowspan="1" colspan="1"  data-bind="attr: { class:currentColumn() == 'Score'? iconType :'sorting' }">Marks</th>
                    <th data-column="CreatedDate" class="sorting" role="columnheader" rowspan="1" colspan="1"  data-bind="attr: { class:currentColumn() == 'CreatedDate'? iconType :'sorting' }">Date</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody data-bind="foreach: pageData()" style="margin-top: 50px">
        <tr>
            <td>
                <input type="checkbox" id="chkTbl" data-bind="attr: { value: AttemptID() }" class="chkRecord" />
            </td>
            <td><a data-bind="attr: { href: '/Student/AttemptDtl/?AttemptID=' + AttemptID() }, text: TestName"></a></td>
            <td><i data-bind="attr: { class : IsFinish() == true ? 'fa fa-check' : 'fa fa-times' }"></i></td>
            <td data-bind="text: Score"></td>
            <td data-bind="text: moment(CreatedDate()).format('Do MMMM, YYYY h:mm:ss a')">
            </td>
            <td>
                 <a data-bind="event: { click: DeleteData }" class="fa fa-times"  href="javascript:void(0);" title="Delete Record"></a>
            </td>
            
        </tr>
    </tbody>
        </table>
        <div class="widget-foot" id="paging">
            <ul class="pagination pagination-sm pull-right">
                 <li><a id="FirstPageButton" href="javascript:void(0)">First</a></li>
                 <li><a id="prevPageButton" href="javascript:void(0)">Prev</a></li>
                <li data-bind="foreach: ko.utils.range(1, pager())"><a data-bind="attr: {text :  $data }, text : $data" href="javascript:void(0)"  class="pageNumber"></a></li>
                <li><a  id="nextPageButton"  href="javascript:void(0)">Next</a></li>
                 <li><a id="LastPageButton" href="javascript:void(0)">Last</a></li>
            </ul>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

@section scripts{
    <script type="text/javascript">
        function HideTable() {
            $("#AttemptTable").hide();
            $('#paging').hide();
            $('#NoRecord').html('<img src="../img/Fillingbrokenring.gif"> loading...');
            var table = document.getElementById("AttemptTable");
            var rowCount = table.rows.length;
            if (rowCount < 2) {
                $('#NoRecord').show();
                showMsg('NoRecord', 'No Record available', 'info');
            }
        }
        function ShowTable() {
            var table = document.getElementById("AttemptTable");
            var rowCount = table.rows.length;
            $('#NoRecord').hide();
            $("#AttemptTable").show();
            $('#paging').show();

        }
        $(document).ready(function () {
            HideTable();
            $('#h2Title').html("<i class='fa fa-magic'></i> Attempt");
            $('#aTitle').html("Attempt");
            $('#liAttempt').addClass("open");
            DeleteData = function (obj, event) {
                $("#modalContent").load('/Student/Attempt/Delete?AttemptID=' + obj.AttemptID(), function () {
                    $('#modalDiv').modal({
                        backdrop: 'static',
                        keyboard: true
                    }, 'show');
                });
            }
           
            $("#btnDeleteAll").click(function () {
                var selectedRecord = new Array();
                try {
                    var table = document.getElementById("AttemptTable");
                    var rowCount = table.rows.length;
                    var j = 0;
                    for (var i = 0; i < rowCount; i++) {
                        var chkbox = $(table).find("input#chkTbl")[i];
                        if (chkbox != undefined && chkbox.checked) {
                            id = chkbox.getAttribute("value");
                            selectedRecord[j] = id;
                            j += 1;
                        }
                    }
                    if (selectedRecord.length == 0) {
                        showMsg('divMsgIndex', 'Please Select Row to Delete', 'danger');
                    }
                    else {
                        $.ajax({
                            url: "/Student/Attempt/DeleteAll?selectedRecord=" + selectedRecord,
                            type: "POST",
                            success: function (result) {
                                if (result != "NotValid") {
                                    $('#modalDiv').modal('hide');
                                    $("#CHKCheckAll").attr('checked', false);
                                    showMsg('divMsgIndex', 'Sucessfully Deleted All Record', 'success');
                                    loadPage(1, 10, '');
                                }
                            },
                            error: function (data) {
                            }
                        });
                    }
                } catch (e) {
                    alert(e);
                }
            });
        });

        var loadPage = function (pageNumber, pageSize, searchString) {
            $.ajax({
                url: "/Student/Attempt?pageNumber=" + pageNumber + "&pageSize=" + pageSize + "&searchString=" + searchString + "&pgindex=10&columnFilter=" + '',
                type: "POST",
                success: function (data) {
                    if (vm == null) {
                       
                        vm = new viewModel(data);
                        if ((vm.maxPageIndex() + 1) >= 5) {
                            $("#nextPageButton").css({ "display": "initial" });
                        }
                        ko.applyBindings(vm);
                        if (data.Data.length == 0) {
                            HideTable();
                        }
                        else {
                            ShowTable();
                        }
                        return data.Data.length;
                    }
                    else {

                        if (data.RecordCount != 0) {
                            vm.maxPageIndex(Math.ceil(data.RecordCount / $("#rowsPerPage").val()) - 1);
                            var Pager = (vm.maxPageIndex() + 1 >= 10) ? 10 : vm.maxPageIndex() + 1;
                            vm.pager(Pager);
                            vm.pageData(ko.observableArray());
                            vm.pageData(ko.mapping.fromJS(data.Data));
                            if ((vm.maxPageIndex() + 1) <= 5) {
                                $("#prevPageButton").css({ "display": "none" });
                                $("#nextPageButton").css({ "display": "none" });
                            }
                            else if ((vm.maxPageIndex() + 1) >= 5 && !vm.isLastPage()) {
                                $("#nextPageButton").css({ "display": "intial" });
                            }
                            else if ((vm.maxPageIndex() + 1) >= 5 && !vm.isFirstPage()) {
                                $("#prevPageButton").css({ "display": "intial" });
                            }
                        }
                        else {
                            if (searchString != '') {
                                showMsg('divMsgIndex', 'Please Enter Value For search', 'info');
                            }
                            if (data.Data.length == 0) {
                                HideTable();
                            }
                            else {
                                ShowTable();
                            }
                            return data.Data.length;

                        }
                    }
                }
            });
        }

        function CheckAll(checkbox) {
            var checkboxes = new Array();
            checkboxes = document.getElementsByTagName('input');
            var i = checkboxes.length;
            for (var i = 0; i < checkboxes.length; i++) {
                if (checkboxes[i].type == 'checkbox') {
                    if ($("input#CHKCheckAll").is(':checked')) {
                        checkboxes[i].checked = true;
                    }
                    else {
                        checkboxes[i].checked = false;
                    }
                }
            }
        }
    </script>
}
@Scripts.Render("~/bundles/pagedlist")